﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mask</title>
    <script type="text/javascript">
        var gMaskAlpha = 0;
        function Init() {
            document.onmousewheel = function () {
                var delta = event.wheelDelta / 120 * 5;
                gMaskAlpha += delta;
                if (gMaskAlpha > 255) {
                    gMaskAlpha = 255;
                }
                if (gMaskAlpha < 0) {
                    gMaskAlpha = 0;
                }
                window.external.setMaskAlpha(gMaskAlpha);
            }
            document.getElementById("t_acc").value = window.external.getAccelerator();
            gMaskAlpha = window.external.getMaskAlpha();
            document.getElementById("main_edit").focus();
        }
        function setAccelerator() {
            var acc = parseFloat(document.getElementById("t_acc").value);
            window.external.setAccelerator(acc);
        }
        function onMainEditChange() {
            return onMainSubmit();
        }
        function onMainSubmit() {
            var edit = document.getElementById("main_edit");
            var text = edit.value;
            window.external.mainEditSubmit(text);
        }
        function onGoBack() {
            window.external.goBack();
        }
        function onGoForward() {
            window.external.goForward();
        }
        function onRefresh() {
            
        }
        function test() {
            alert("focus");
        }
    </script>
    <style type="text/css">
        #bt_goback
        {
            width:120px; height:120px;
            position:absolute;
            top:300px; left:80px;
        }
        #bt_goforward
        {
            width:60px; height:60px;
            position:absolute;
            top:300px; left:220px;
        }
        #bt_refresh
        {
            width:60px; height:60px;
            position:absolute;
            top:361px; left:220px;
        }
    </style>
    
</head>
<body style="padding:0; margin: 0; background: #000000;">
<div style="text-align: center; position:absolute; top:50px; left:100; color:#FFFFFF">
    加速：<input id="t_acc"type="text" value="1.0"/> <input id="bt_acc" type="submit" value="确定" onclick="setAccelerator()"/>
</div>
<div style="text-align:center; margin-left:auto; margin-right:auto; vertical-align:middle; padding-top:200px;">
<input type="text" id="main_edit" onchange="onMainEditChange();" style=" width:474px; height:22px; font:16px arial; border:1px solid #cdcdcd; border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a"/>
<input type="submit" id="bt_main_submit" onclick="onMainSubmit();" value="Go Go Go" style="height:22px; font:16px arial;"/>
</div>
<br /><div id="testLable"></div>
<img onclick="onGoBack();" id="bt_goback" alt="" src="" />
<img onclick="onGoForward();" id="bt_goforward" alt="" src="" />
<img onclick="onRefresh();"id="bt_refresh" alt="" src="" />
<script type="text/javascript">
    Init();
</script>
</body>
</html>